<template>
  <div class="sl-form-wrapper">
    <Form v-model:value="form" autocomplete="off" layout="inline">
      <Row :gutter="16">
        <Col :span="6">
          <FormItem label="应用" name="appId">
            <Select v-model:value="appId" :allowClear="true" :options="appOptions" placeholder="请选择应用"/>
          </FormItem>
        </Col>
        <Col :span="6">
          <Button style="margin-right: 10px" type="primary" @click="getCmTenantAppPage">查询</Button>
          <Button @click="reset">重置</Button>
        </Col>
      </Row>
    </Form>
    <Table
        :columns="cmTenantAppColumns"
        :dataSource="cmTenantAppDataSource"
        :loading="loading"
        :pagination="pagination"
        :scroll="scroll"
        bordered
        class="main-table"
        show-size-changer
        @change="handleTableChange"
    >
    </Table>
  </div>
</template>
<script lang="ts" setup>
import {Button, Col, Form, FormItem, Row, Select, Table, TableProps} from 'ant-design-vue';
import {cmTenantAppColumns} from '/@/views/integrated-center/cm-tenant-app/data';
import {computed, ref} from 'vue';
import {form} from '/@/views/integrated-center/cm-order-action/data';
import {getAppList} from '/@/api/maintenance-center/microservice-govern/scene/scene';
import {SelectItem} from '../data';
import {CmTenantAppItem} from '/@/api/integrated-center/model/integratedModel';
import {getCmTenantApps} from '/@/api/integrated-center/integrated';

const cmTenantAppDataSource = ref<CmTenantAppItem[]>([]);
const scroll = ref<undefined | object>(undefined);
let total = ref(0);

const loading = ref(true);
let appId = ref('');
let appOptions = ref<SelectItem[]>([]);

// 分页设置
const pagination = computed(() => ({
  showSizeChanger: true,

  current: form.current,
  pageSize: form.size,
  total: total.value,
  pageSizeOptions: [10, 20, 50],
  showTotal: () => {
    return `共 ${total.value} 条`;
  },
}));

async function getAppOptions() {
  let res = await getAppList();
  res.forEach((app) => {
    appOptions.value.push({
      label: app.appName,
      value: app.appId,
    });
  });
}

async function getCmTenantAppPage() {
  form.appId = appId.value;
  try {
    await getCmTenantApps(form).then((res) => {
      cmTenantAppDataSource.value = res.items;
      total.value = res.total;
    });
  } finally {
    loading.value = false;
  }
}

const handleTableChange: TableProps['onChange'] = (pag) => {
  pagination.value.current = Number(pag.current);
  pagination.value.pageSize = Number(pag.pageSize);
  form.size = Number(pag.pageSize);
  form.current = Number(pag.current);
  if (pagination.value.pageSize > 10) {
    scroll.value = {y: 500};
  }

  getCmTenantAppPage();
};

// 查询表单重置
async function reset() {
  form.appId = '';
  appId.value = '';
  getCmTenantAppPage();
}

getAppOptions();

getCmTenantAppPage();
</script>
<style lang="less">

.sl-form-wrapper {
  .ant-form-inline {
    flex-direction: column;
  }
}

</style>
